<template>
  <view class="order-item" @click="toDetail">
    <view class="ord-no">订单编号：{{ detail.appoint_no }}</view>
    <view class="car-info">
      <image class="car-img" :src="detail.carmodel?.images && detail.carmodel.images[0]" mode="aspectFit"></image>
      <view class="info-right">
        <view class="tit one-ellipsis">
          <text>{{ detail.brand_name }} </text>
          <text>&nbsp;&nbsp;
          </text>
          <text>{{ detail.series_name }}</text>
        </view>
        <view class="tit one-ellipsis">
          <text>{{ detail.carmodel.title }}</text>
        </view>
        <view class="addr">{{ detail.shop_name }}</view>
      </view>
    </view>

    <view class="item-btm">
      <view class="price">
        <text class="tit">预约时间：</text>
        <text class="tim">{{ detail.appointtime }}</text>
      </view>
      <view class="btn payed" v-if="detail.status == 0">已预约</view>
      <view class="btn down" v-if="detail.status == 1">已完成</view>
    </view>
  </view>
</template>

<script setup>
import { router } from "@/path/router";
const { detail } = defineProps({
  detail: Object,
})
function toDetail() {
  router.navigate({ url: "/pages/mine/appointment-detail/index", }, {
    data: {
      id: detail.id
    }
  })
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
